@mixin hover-bg-variant($parent, $color) {
  #{$parent}:hover {
    background-color: $color !important;
  }
}

@each $color, $value in $colors {
	@include bg-variant(".bg-#{$color}-lightest", mix($value, #fff, 10%));
	@include bg-variant(".bg-#{$color}-lighter", mix($value, #fff, 30%));
	@include bg-variant(".bg-#{$color}-light", mix($value, #fff, 70%));
	@include bg-variant(".bg-#{$color}-dark", mix($value, #000, 80%));
	@include bg-variant(".bg-#{$color}-darker", mix($value, #000, 40%));
	@include bg-variant(".bg-#{$color}-darkest", mix($value, #000, 20%));

  @include hover-bg-variant(".hover-bg-#{$color}-lightest", mix($value, #fff, 10%));
	@include hover-bg-variant(".hover-bg-#{$color}-lighter", mix($value, #fff, 30%));
	@include hover-bg-variant(".hover-bg-#{$color}-light", mix($value, #fff, 70%));
	@include hover-bg-variant(".hover-bg-#{$color}-dark", mix($value, #000, 80%));
	@include hover-bg-variant(".hover-bg-#{$color}-darker", mix($value, #000, 40%));
	@include hover-bg-variant(".hover-bg-#{$color}-darkest", mix($value, #000, 20%));
}
